{% extends 'mac_basic.html' %}


{% block title %}
    输入起始MAC地址
{% endblock %}


{% block css %}
    <style>
        .error_span {
            position: absolute;
            color: red;
        }
        .form {
            width: 600px;
            margin-top: 63px;
            margin-left: 59px;
        }
        .form-group {
            margin-bottom: 25px;
        }
        #input_mac,#details,.details-table {
            margin-left: 25px;
            margin-right: 25px;
        }
        #input_mac {
            border-bottom: 3px solid #8B8989;
            padding-left: 50px;
            padding-bottom: 7px;
        }
        #details {
            border-bottom: 2px solid #1C1C1C;
            padding-left: 50px;
        }
        th, td {
            text-align: center;
        }
        h3 {
            margin-bottom: 3px;
        }
    </style>
{% endblock %}


{% block content %}
    <div id="input_mac">
        <h3>制定<small> 生产计划</small></h3>
    </div>
    <div class="form">
        <form class="form-horizontal">
            <div id="mac_checkbox" class="form-group">
                <label for="mac_id" class="col-sm-4 control-label">MAC由其他公司提供</label>
                <div class="checkbox col-sm-8">
                  <input type="checkbox" style="margin-left: 0">
                </div>
            </div>

            <div class="form-group">
                <label for="mac_id" class="col-sm-4 control-label">产品名称</label>
                <div class="col-sm-8">
                    <select id="product_id" name="product_id" class="form-control">
                        {% for obj in product_obj %}
                          <option value="{{ obj.id }}" mark="{{ obj.mark1 }}" address="{{ obj.address }}">{{ obj.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="mac_id" class="col-sm-4 control-label">起始MAC地址</label>
                <div class="col-sm-8">
{#                    {% if mac_obj %}#}
{#                        <input id="mac_id" class="form-control" name="mac" value="{{ mac_obj.mac_curr }}" type="text"  readonly="readonly">#}
{#                    {% else %}#}
                        <input id="mac_id" type="text" class="form-control" name='mac' value="" placeholder="请输入起始MAC地址" readonly="readonly">
{#                    {% endif %}#}
                    <span class="error_span" id="error_unique"></span>
                </div>

            </div>

            <div class="form-group">
                <label for="nums_id" class="col-sm-4 control-label">生成MAC数量</label>
                <div class="col-sm-8">
                    <input id="nums_id" type="number" class="form-control" name="mac_nums" placeholder="请输入mac数量">
                    <span class="error_span" id="error_nums"></span>
                </div>
            </div>
            <div id="ip_checkbox" class="form-group" style="display: none">
                <label for="mac_id" class="col-sm-4 control-label">是否修改起始IP</label>
                <div class="checkbox col-sm-8">
                  <input type="checkbox" style="margin-left: 0">
                </div>
            </div>
            <div class="form-group" style="display: none">
                <label for="ip_id" class="col-sm-4 control-label">起始IP地址</label>
                <div class="col-sm-8">
{#                    {% if mac_obj %}#}
                        <input id="ip_id" class="form-control" name="ip" value=""
                               type="text" readonly="readonly">
{#                    {% else %}#}
{#                        <input id="ip_id" type="text" class="form-control" name="ip" placeholder="请输入IP地址">#}
{#                    {% endif %}#}
                </div>
            </div>
            <div class="form-group">
                <label for="future_id" class="col-sm-4 control-label">future</label>
                <div class="col-sm-8">
                    <input id="future_id" type="text" class="form-control" name="mac_future" value="" placeholder="请输入特殊字段">
                    <span class="error_span" id="error_future"></span>
                </div>
            </div>

            <div class="form-group">
            <div class="col-sm-offset-4 col-sm-3">
                <input id="button" class="form-control btn btn-info" type="button" value="确定生成">
            </div>
        </div>
        </form>
    </div>

    <div id="details">
        <h3><small>生产计划明细</small></h3>
    </div>
    <div class="details-table">
        <table class="table table-condensed">
      <thead>
        <tr>
          <th>产品名称</th>
          <th>产品型号</th>
          <th>cpu型号</th>
          <th>国家码</th>
          <th>board型号</th>
          <th>内存容量</th>
          <th>需要MAC数量</th>
          <th>生成MAC数量</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac"></td>
          <td class="mac_nums"></td>
        </tr>

      </tbody>
    </table>
    </div>

{% endblock %}


{% block js %}
    <script>
        $('#button').click(function () {
            $.ajax({
                url: "{% url 'generate_macs' %}",
                type: "POST",
                data: {
                    'mac': $('#mac_id').val(), "mac_nums": $('#nums_id').val(),
                    "ip": $('#ip_id').val(), 'product_id': $('#product_id').val(),
                    "id": {{ id }}, 'future': $('#future_id').val(),
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        window.location.replace("{% url 'download_details'%}");
                    } else {
                        if (res.error === 'mac') {
                            $('#error_mac').text('请输入正确的MAC地址')
                        }
                        else if (res.error === 'ip') {
                            $('#error_ip').text('请输入正确的IP地址')
                        }else if (res.error === 'mac_nums'){
                            $('#error_nums').text('数量不能输入空')
                        }else if (res.error === 'future') {
                            $('#error_future').text('格式不正确,格式为十六进制形式')
                        }else {
                            $('#error_unique').text('生成的MAC有重复')
                        }
                    }
                }
            })
        })
        $('#ip_id').focus(function () {
            $("#error_ip").text('')
        })

        var ip_curr = null
        var $ipId = $('#ip_id')
        var $macId = $('#mac_id')
        var $mac = $(".mac")
        var $futureId = $('#future_id')
        var $productId = $('#product_id')
        var $ipEle = $ipId.parentsUntil('form').eq(1)
        $productId.mouseup(function () {
            var $optionSelected = $(this).find('option:selected')
            ip_curr = $optionSelected.attr('address')
            var mark = $optionSelected.attr('mark')
            $.ajax({
                url: "{% url 'production_plan' %}",
                type: 'GET',
                data: {'pid': $(this).val()},
                dataType: 'JSON',
                success: function (res) {
                    var product = new Array(res[0].name, res[0].model, res[0].cpu, res[0].country, res[0].board, res[0].memory, res[0].mac_inc)
                    $futureId.val(res[0].future)
                    console.log(res[1]);
                    $macId.val(res[1].mac_curr)
                    $.each(product, function (key, value) {
                        $mac[key].innerText = value
                    })
                }
            })
            if (mark === '1' || mark === '2') {
                $ipEle.prev().slideUp("slow")
                $ipEle.slideUp("slow")
                $ipId.val(null)
            }else {
                $ipEle.prev().slideDown("slow")
                $ipEle.slideDown("slow")
                $ipId.val($optionSelected.attr('address'))
            }
        })

        $('#nums_id').on('keyup mouseup',function () {
            var $num_val = $(this)
            if ($num_val.val() < 1) {
                $num_val.val('')
            }
            $('.mac_nums').text($num_val.val())
            $('#error_nums').text('')
        })

        var click_mac_nums = 0
        var $mac_id = $('#mac_id')
        var mac_curr = $mac_id.val()
        $('#mac_checkbox input[type=checkbox]').click(function () {
            click_mac_nums += 1
            if (click_mac_nums%2===0) {
                $mac_id.val(mac_curr).attr('readonly', 'readonly')
            }else {
                $mac_id.removeAttr('readonly').val('')

            }
        })

        var click_ip_nums = 0
        var $ip_id = $('#ip_id')
        $('#ip_checkbox input[type=checkbox]').click(function () {
            click_ip_nums += 1
            if (click_ip_nums%2===0) {
                $ip_id.val(ip_curr).attr('readonly', 'readonly')
            }else {
                $ip_id.removeAttr('readonly')
            }
        })


    </script>
{% endblock %}
